<template>
  <div class="box">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/page' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-button type="primary" @click="add">添加分类</el-button>

      <!-- 表格区域 -->
      <div style="margin-top: 20px">
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="cat_id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column type="index" label="#" width="50"> </el-table-column>
          <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
          <el-table-column prop="address" label="是否有效">
            <template slot-scope="scope">
              <div>
                <i class="el-icon-success" style="color: greenyellow"></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="排序">
            <template slot-scope="scope">
              <el-tag v-show="scope.row.cat_level == 0">一级</el-tag>
              <el-tag type="success" v-show="scope.row.cat_level == 1"
                >二级</el-tag
              >
              <el-tag type="warning" v-show="scope.row.cat_level == 2"
                >三级</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 表格区域 -->

      <!-- 添加模态框 -->
      <el-dialog title="添加分类" :visible.sync="dialogVisible" width="50%">
        <el-form
          :model="add_cate"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="活动名称" prop="cat_name">
            <el-input v-model="add_cate.cat_name"></el-input>
          </el-form-item>
          <!-- 级联菜单 -->
          <div class="block" style="margin-left: 30px">
            <span class="demonstration">父级分类</span>
            <el-cascader
              v-model="add_cate.cat_pid"
              :options="options"
              :props="{ label: 'cat_name', value: 'cat_id' }"
              @change="handleChange"
              style="margin-left: 15px; width: 625px"
            ></el-cascader>
          </div>
          <!-- 级联菜单 -->
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="yescate('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 添加模态框 -->

      <!-- 修改模态框 -->
      <el-dialog
        title="修改分类"
        :visible.sync="getCategoriesVisible"
        width="50%"
      >
        <el-form label-width="100px">
          <el-form-item label="分类名称">
            <el-input v-model="edits.cat_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="getCategoriesVisible = false">取 消</el-button>
          <el-button type="primary" @click="addEdit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改模态框 -->

      <!-- 分页 -->
      <el-pagination
        style="margin-top: 10px"
        :page-sizes="[2, 5, 7, 8]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="query.pagenum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
import {
  getCategories,
  updataCategories,
  setCategories,
  delCategories,
  putCategories,
} from '../api/login.js'
import { log } from 'util'
export default {
  data() {
    return {
      tableData: [], //分类的数据信息
      dialogVisible: false, //模态框显示隐藏
      getCategoriesVisible: false, //修改模态框显示隐藏
      //校验
      rules: {
        cat_name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
      options: [], //级联菜单的属性配置
      add_cate: {
        cat_pid: 0, //父级分类的id
        cat_name: '',
        cat_level: 0,
      },
      //分页的数据
      query: {
        pagesize: 2,
        pagenum: 1,
      },
      total: 0, //总记录条数
      edits: {
        cat_name: '',
      },
    }
  },
  mounted() {
    this.gories()
  },
  methods: {
    //渲染数据列表
    gories() {
      //请求列表的接口，当前页当前条携带在接口中
      getCategories(this.query.pagenum, this.query.pagesize).then((res) => {
        // console.log(res, '分类数据')
        //赋值给tableData
        this.tableData = res.data.data.result
        this.total = res.data.data.total
      })
    },
    //确认按钮
    yescate(formName) {
      //校验确认
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //请求添加分类的接口
          updataCategories(this.add_cate).then((res) => {
            console.log(res, '添加分类')
            //调用重新渲染列表
            this.$message.success(res.data.meta.msg)
            this.gories()
            //关闭添加分类的模态框
            this.dialogVisible = false
            this.add_cate = {
              cat_pid: 0, //父级分类的id
              cat_name: '',
              cat_level: 0,
            }
          })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    //添加分类
    add() {
      //打开模态框
      this.dialogVisible = true
      //请求接口级联菜单的接口

      setCategories().then((res) => {
        if (res.data.meta.status == 200) {
          this.$message.success(res.data.meta.msg)
          // console.log(res, '级联')
          //赋值
          this.options = res.data.data
        }
      })
    },

    //删除分类
    del(row) {
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //请求接口
          delCategories(row.cat_id).then((res) => {
            //判断啊提示信息
            if (res.data.meta.status == 200) {
              this.$message.success(res.data.meta.msg)
              // console.log(res, '删除')
              this.gories()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },

    //修改
    edit(row) {
      // console.log(row)
      //打开模态框
      this.getCategoriesVisible = true
      //回填数据
      this.edits = {
        id: row.cat_id,
        cat_name: row.cat_name,
      }
    },
    //确认修改
    addEdit() {
      //请求接口
      putCategories(this.edits.id, { cat_name: this.edits.cat_name }).then(
        (res) => {
          //判断提示信息
          if (res.data.meta.status == 200) {
            this.$message.success(res.data.meta.msg)
            // console.log(res, '提交分类')
            this.gories() //调用重新渲染
            this.getCategoriesVisible = false //关闭模态框
          }
        },
      )
    },

    //分页,当前页多少条
    handleSizeChange(size) {
      this.query.pagesize = size
      //重新调用
      this.gories()
    },
    //当前第几页
    handleCurrentChange(num) {
      this.query.pagenum = num
      //重新调用
      this.gories()
    },

    // 级联菜单
    handleChange(value) {
      //获取选择级联菜单分类的最后一集，把他们赋给pid
      this.add_cate.cat_pid = value[value.length - 1]
      //修改等级，层级等于选择器父类id的长度
      this.add_cate.cat_level = value.length
    },
  },
  computed: {},
  watch: {},
}
</script>

<style scoped lang="scss">
.box {
  padding: 20px;
  background: #eaedf1;
  height: 693px;
  .el-card {
    margin-top: 20px;
  }
}
</style>
